<template>
  <el-breadcrumb :separator-icon="ArrowRight">
    <el-breadcrumb-item :to="{ path: '/overview' }">
      <h3>首页</h3>
    </el-breadcrumb-item>

    <el-breadcrumb-item>
      <h3>MINI</h3>
    </el-breadcrumb-item>
  </el-breadcrumb>
  <el-card class="box-card">
    <el-row :gutter="20">
      <el-col :span="18" :offset="2">

        <div class="grid-content " style="margin: 10px;">

          <el-row class="mb-4">
            <!--<el-button size="large" type="primary" @click="getMethod">Message</el-button>-->
            <el-button size="large" type="primary" @click="sendemail">邮件测试</el-button>
            <el-button size="large" type="primary" @click="apitest">接口测试</el-button>

          </el-row>

        </div>
      </el-col>
    </el-row>

    <el-divider />

    <!--内容-->
    <el-row :gutter="20">
      <el-col :span="18" :offset="2">
        <div class="grid-content">
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column type="index" index="indexMethod" label="ID" />
            <el-table-column prop="date" label="Date" width="120" />
            <el-table-column prop="project" label="Project" width="120" />
            <el-table-column prop="taskid" label="TaskId" width="250" />
            <el-table-column prop="result" label="Result" width="120" />
            <el-table-column prop="progress" label="progress">
              <template #default="scope">
                <el-button type="text" size="small" @click="deleteRow(scope.$index, scope.row)">
                  删除
                </el-button>
                <el-button type="text" size="small" @click="searchproc(scope.$index, scope.row.taskid)">
                  查看进程
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>

      </el-col>
    </el-row>

    <!-- <el-row :gutter="20">
      <el-col :span="12" :offset="6">
         分页 
        <el-pagination v-model:currentPage="queryinfo.pagenum" v-model:page-size="queryinfo.pagesize"
          :page-sizes="[1, 2, 5, 10]" layout="total, sizes, prev, pager, next, jumper" :total="dd.total"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />

      </el-col>
    </el-row> -->

  </el-card>
</template>

<script setup>

//ref() 函数用来根据给定的值创建一个响应式的数据对象，ref() 函数调用的返回值是一个对象，这个对象上只包含一个 .value 属性
//   1、scope.$index 代表拿到每一行的index
// 2、scope.row代表拿到每一行的数据
//    响应式数据  ref
import { ref, reactive } from 'vue'
import { send_mail, api_test, taskstatus } from '../../../api/workers'
import dayjs from 'dayjs'
import { ArrowRight } from '@element-plus/icons-vue'     //图标


const obj = reactive({ name: "name" });
const tableData = ref([]);

//删除行数据
const deleteRow = (index, $row) => {
  console.log($row);
  console.log($row.taskid);
  tableData.value.splice(index, 1)
};

const result = {
  data() {
    return {
      result: ""
    }
  }
};
const searchproc = (index, $row) => {
  console.log('taskid:', $row);
  //请求接口
  taskstatus($row).then(response => {
    console.log($row);
    console.log(response);
    console.log(response.status);
    ElMessage(response['data']['state'])

  })
};

const locust = () => {
  ElMessage('locust test ')
};

//任务执行发送邮件
const sendemail = () => {
  send_mail().then(res => {
    let { action, code, task_id } = res.data;
    console.log("action:", action);
    console.log("code:", code);
    console.log("task_id:", task_id);
    //获取到结果后,添加到
    onAddItem(action, code, task_id)

  })
};

// 接口自动化测试
const apitest = () => {
  api_test().then(res => {
    // let { action, code, task_id } = res;
    console.log("action:", action);
    // console.log("code:", code);
    // console.log("task_id:", task_id);
    // //获取到结果后,添加到表格
    // onAddItem(action, code, task_id)
  })
};


const now = new Date();

//自动增加执行任务
const onAddItem = (action, code, task_id) => {
  now.setDate(now.getDate());
  tableData.value.push({
    date: dayjs(now).format('YYYY-MM-DD HH:MM'),
    project: action,
    taskid: task_id,
    result: code

  })
}

// 监听 pagesize
function handleSizeChange(newsize) {
  console.log(newsize)
}
// 监听最新的页码 
function handleCurrentChange(newpage) {
  console.log(newpage)
}



</script>

<style lang="less" scoped>
.box-card {
  height: 100%;
}

.el-row {
  margin-bottom: 20px;
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>